{% extends 'mobile_app/base.html' %}
{% load static %}

{% block title %}登录 - 郑州移不动{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-4">
        <div class="card border-0 shadow">
            <div class="card-body p-4">
                <div class="text-center mb-4">
                    <i class="fas fa-mobile-alt text-primary mb-3" style="font-size: 3rem;"></i>
                    <h3 class="fw-bold">登录账户</h3>
                    <p class="text-muted">请输入您的手机号码和密码</p>
                </div>

                <form method="post">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="username" class="form-label">手机号码</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-phone"></i>
                            </span>
                            <input type="text" class="form-control" id="username" name="username" 
                                   placeholder="请输入11位手机号码" maxlength="11" required>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-lock"></i>
                            </span>
                            <input type="password" class="form-control" id="password" name="password" 
                                   placeholder="请输入密码" required>
                        </div>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fas fa-sign-in-alt me-2"></i>立即登录
                        </button>
                    </div>
                </form>

                <div class="text-center mt-4">
                    <p class="text-muted">
                        还没有账户？ 
                        <a href="{% url 'mobile_app:register' %}" class="text-decoration-none">
                            立即注册
                        </a>
                    </p>
                </div>
            </div>
        </div>

        <!-- 快速登录提示 -->
        <div class="card border-0 bg-light mt-3">
            <div class="card-body text-center">
                <h6 class="text-muted mb-2">测试账户</h6>
                <p class="small text-muted mb-0">
                    用户名: 13800138000<br>
                    密码: test123456
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 手机号码格式验证
    $('#username').on('input', function() {
        var value = $(this).val();
        var phoneRegex = /^1[3-9]\d{9}$/;
        if (value.length === 11 && !phoneRegex.test(value)) {
            $(this).addClass('is-invalid');
        } else {
            $(this).removeClass('is-invalid');
        }
    });
});
</script>
{% endblock %}
